<template>
  <div class="table-box">
    <ProTable :columns="columns" :request-api="getLouPanList">
      <template #cover="{ row }">
        <el-image class="w-100px h-100px" fit="scale-down" :src="url(userInfo.prefix, row.cover)"></el-image>
      </template>
      <template #price="{ row }">
        <span>{{ row.reference_price }}元/m²</span>
      </template>
      <template #status="{ row }">
        <span class="px-8px py-4px" :style="{ backgroundColor: row.sellStatus.backColor, color: row.sellStatus.textColor }">{{
          row.sellStatus.name
        }}</span>
      </template>
      <template #opera="{ row }">
        <el-button link :icon="Search" @click="go(row.id)" v-if="false">查看</el-button>
        <el-button link :icon="Tools" @click="goActive(row.id)">动态</el-button>
      </template>
      <template #activeTime="{ row }">
        <span v-show="row.activeLastUpdate !== 0">{{
          dayjs(dayjs.unix(row.activeLastUpdate).format("YYYY-MM-DD HH:mm:ss")).fromNow()
        }}</span>
        <span v-show="row.activeLastUpdate === 0">无</span>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { getLouPanList } from "@/api/modules/broker_help";
import { Search, Tools } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/zh";

import { useUserStore } from "@/stores/modules/user";
import { url } from "@/utils/index";
dayjs.extend(relativeTime);
dayjs.locale("zh");

const { userInfo } = useUserStore();

const router = useRouter();

const go = (id: number) => {
  router.push({ name: "LookLouPanInfo", query: { id } });
};

const goActive = (id: number) => {
  router.push({ name: "LouPanActiveList", query: { id } });
};

const columns: ColumnProps[] = [
  { prop: "name", label: "楼盘名称" },
  { prop: "cover", label: "封面", width: 140 },
  { prop: "price", label: "参考价" },
  { prop: "belongName", label: "所属地区" },
  { prop: "status", label: "销售状态" },
  { prop: "activeTime", label: "动态更新" },
  { prop: "opera", label: "操作" }
];
</script>

<style></style>
